<template>
  <div class="config-container">
    <el-row>
      <el-col :md="12" :lg="12" :sm="12" :xl="8">
        <el-form ref="mallSettingForm" :model="formData"  :rules="rules" label-width="120px" size="small">
          <!-- <el-form-item label="公众号appid" prop="gzhAppid">
            <el-input v-model="formData.gzhAppid"></el-input>
          </el-form-item>
          <el-form-item label="公众号secret" prop="gzhSecret">
            <el-input v-model="formData.gzhSecret"></el-input>
          </el-form-item> -->
          <el-form-item label="商城名称" prop="mallName">
            <el-input v-model="formData.mallName"></el-input>
          </el-form-item>
          <el-form-item label="商城服务提供者" prop="mallProvider">
            <el-input v-model="formData.mallProvider"></el-input>
          </el-form-item>
          <el-form-item label="商户代码" prop="merchantId">
            <el-input v-model="formData.merchantId"></el-input>
          </el-form-item>
          <el-form-item label="商户柜台代码" prop="posId">
            <el-input v-model="formData.posId"></el-input>
          </el-form-item>
          <el-form-item label="分行代码" prop="branchId">
            <el-input v-model="formData.branchId"></el-input>
          </el-form-item>
          <el-form-item label="查询密码" prop="queryPass">
            <el-input v-model="formData.queryPass"></el-input>
          </el-form-item>
          <el-form-item label="公钥" prop="pub">
            <el-input type="textarea" v-model="formData.pub" :rows="8"></el-input>
          </el-form-item>
          <el-form-item label="商城Logo" prop="logoId">
            <div class="addImgRow">
              <div class="addImg" @click="()=>imgShow=!imgShow">
                <img :src="selectImg.fileUrl" v-if="selectImg.fileUrl" />
                <i class="el-icon-plus" v-else></i>
              </div>
              <span>{{selectImg.logoName}}</span>
            </div>
            <div class="imgArray" v-show="imgShow">
              <div v-for="(item,index) in logoList" class="addImg " :class="{activeImg : index==selectImgIndex}"
                @click="imgCode(item,index)">
                <img :src="item.fileUrl" />
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="saveSetting">保存设置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    mallSettingUpdate,
    mallSettingInfo
  } from '@/api/mall.product.js'

  import {
    companyLogoList
  } from '@/api/logo'

  export default {
    data: function() {
      return {
        formData: {
          gzhAppid: undefined,
          gzhSecret: undefined,
          mallName: undefined,
          mallProvider: undefined,
          merchantId: undefined,
          posId: undefined,
          branchId: undefined,
          pub: undefined,
          queryPass: undefined,
          logoId:undefined,
        },

        rules: {
          mallName: [{
            required: true,
            message: '请输入商城名称',
            trigger: 'blur'
          }],
          mallProvider: [{
            required: true,
            message: '请输入商城服务提供者',
            trigger: 'blur'
          }],
          merchantId: [{
            required: true,
            message: '请输入商户代码',
            trigger: 'blur'
          }],
          posId: [{
            required: true,
            message: '请输入商户柜台代码',
            trigger: 'blur'
          }],
          branchId: [{
            required: true,
            message: '请输入分行代码',
            trigger: 'blur'
          }],
          pub: [{
            required: true,
            message: '请输入公钥',
            trigger: 'blur'
          }],
          queryPass: [{
            required: true,
            message: '请输入查询密码',
            trigger: 'blur'
          }],
          logoId: [{
            required: true,
            message: '请选择Logo',
            trigger: 'blur'
          }],
        },
        imgShow: false,
        logoList: [],
        selectImgIndex: -1,
        selectImg: {},

      }
    },

    mounted() {
      this.loadSettingInfo();
    },
    methods: {
      // 商城设置详情
      async loadSettingInfo() {
        var res = await mallSettingInfo();
        for (const key in this.formData) {
          if (res.data.hasOwnProperty(key)) {
            this.formData[key] = res.data[key];
          }
        }
        //logo列表
        var r1 = await companyLogoList();
        this.logoList = r1.data;

        //logo
        if (res.data.hasOwnProperty('logoId')) {
          for (let index in this.logoList) {
            if (this.logoList[index].logoId == res.data.logoId) {
              this.imgCode(this.logoList[index], index);
            }
          }
        }
      },

      imgCode(item, index) {
        this.imgShow = false;
        this.selectImgIndex = index;
        this.selectImg = item;
        this.formData.logoId = item.logoId;
      },

      // 保存设置
      async saveSetting() {
        this.$refs.mallSettingForm.validate(async valid => {
          if (!valid) return false;
          var data = Object.assign({}, this.formData);
          var res = await mallSettingUpdate(data);
          this.$utils.showSuccessMessage(res.msg);
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .config-container {
    padding: 15px;
  }

  /* 添加Logo */
  .addImgRow {
    display: flex;
    align-items: center;
  }

  .addImgRow>span {
    color: #606266;
    font-size: 14px;
  }

  .addImg {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #f1f1f1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .addImg img {
    width: 50px;
    height: 50px;
  }

  .imgArray {
    display: flex;
    flex-wrap: wrap;
    background-color: #f2f4f8;
    padding: 10px;
    padding-bottom: 0;
    margin-top: 15px;
    position: relative;
  }

  .imgArray::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f2f4f8;
    border-left: 10px solid transparent;
    position: absolute;
    top: -10px;
    left: 20px;
    z-index: 5;
  }

  .activeImg {
    border: 1px solid #000;
    box-sizing: border-box;
  }
</style>
